<template>
  <div>
    <el-card>
      <el-button type="success" style="margin-bottom: 20px" @click="showErweima"
        >添加二维码</el-button
      >
      <el-table :data="ServiceDelList" border style="width: 100%">
        <el-table-column prop="no" label="序号" width="180"></el-table-column>
        <!-- <el-table-column prop="companyId" label="公司名称" width="180"></el-table-column> -->
        <el-table-column
          prop="name"
          label="二维码名称"
          width="280"
        ></el-table-column>
        <el-table-column prop="qrcode" label="二维码图片" width="180">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  :src="scoped.row.qrcode"
                  alt
                  style="width: 40px; height: 40px"
                />
              </viewer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间"></el-table-column>
        <el-table-column
          prop="count"
          label="使用次数"
          width="180"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="showEdit(scope.row.id, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handlerDel(scope.row.id)"
              >删除</el-button
            >
            <!-- <el-button @click="handlerimg">
              上传图片
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="erweimaQuery.pageSize"
          :current-page="erweimaQuery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 在线客服 -->
    <!-- <div class="onlineKefu">
      <img
        src="../../assets/images/kefu.jpg"
        alt=""
        style="width:50px;height:50px"
      />
      <el-button type="danger" @click="goKefu">在线客服</el-button>
    </div> -->
    <!-- 二维码弹框 -->
    <el-dialog
      :title="erweimaName"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="erweimaRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="二维码名称:" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入二维码名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="二维码图片:" prop="qrcode">
          <uploadimage
            @getImgSrc="handlerImg"
            :options="options"
            :list="ruleForm.qrcode"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  companyServiceSel,
  companyServiceAdd,
  companyServiceUpdate,
  companyServiceDel
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
import uploadimage from "../../components/uploadimage";
export default {
  data() {
    return {
      options: {
        type: "picture-card",
        limit: 1
      },
      // 二维码列表
      ServiceDelList: [],
      //   分页
      erweimaQuery: {
        pageNumber: 1,
        pageSize: 10,
        companyId: ""
      },
      //   总条数
      count: 0,
      //  弹框名字
      erweimaName: "添加二维码",
      dialogVisible: false,
      //   二维码数据
      ruleForm: {
        qrcode: [],
        userId: "",
        companyId: "",
        name: "",
        id: ""
      },
      // 校验规则
      erweimaRules: {
        name: [{ required: true, message: "请填写二维码名称", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getDataInit();
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.erweimaQuery.pageNumber = 1;
      this.getcompanyServiceSel();
    }
  },
  components: {
    uploadimage
  },
  methods: {
    handlerimg() {
      this.$router.push("/newimg");
    },
    // 客服聊天
    goKefu() {
      this.$router.push("/Kefu");
    },
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getcompanyServiceSel();
      }
    },
    // 二维码列表
    getcompanyServiceSel() {
      this.erweimaQuery.companyId = this.org_id;
      this.postRequest(companyServiceSel, this.erweimaQuery).then(res => {
        if (res.code == 200) {
          this.ServiceDelList = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 点击添加二维码显示弹框
    showErweima() {
      this.erweimaName = "添加二维码";
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击编辑弹出二维码弹框
    showEdit(id, data) {
      this.ruleForm.qrcode = [];
      this.$nextTick(() => {
        this.erweimaName = "编辑二维码";
        this.dialogVisible = !this.dialogVisible;
        this.ruleForm.id = id;
        this.ruleForm.name = data.name;
        this.ruleForm.qrcode.push(data.qrcode);
      });
    },
    // 获取二维码地址
    handlerImg(val) {
      this.ruleForm.qrcode = val;
    },
    // 封装一个添加二维码的方法
    handlerAdd() {
      this.ruleForm.userId = window.sessionStorage.getItem("userId");
      this.ruleForm.companyId = this.org_id;
      this.ruleForm.qrcode = this.ruleForm.qrcode.join(",");
      this.postRequest(companyServiceAdd, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加二维码成功");
          this.dialogVisible = false;
          this.getcompanyServiceSel();
        }
      });
    },
    // 封装一个编辑方法
    handlerEdit() {
      this.ruleForm.userId = window.sessionStorage.getItem("userId");
      this.ruleForm.companyId = this.org_id;
      this.ruleForm.qrcode = this.ruleForm.qrcode.join(",");

      this.postRequest(companyServiceUpdate, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑二维码成功");
          this.dialogVisible = false;
          this.getcompanyServiceSel();
        }
      });
    },
    // 点击确定判断是添加二维码还是编辑二维码
    handlerSure() {
      if (this.erweimaName == "添加二维码") {
        this.handlerAdd();
      } else if (this.erweimaName == "编辑二维码") {
        this.handlerEdit();
      }
    },
    // 点击删除二维码
    handlerDel(id) {
      const params = {
        userId: window.sessionStorage.getItem("userId"),
        id: id
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(companyServiceDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getcompanyServiceSel();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //点击空白触发的事件
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm.qrcode = [];
      this.ruleForm.name = "";
    },
    // 分页
    handleSizeChange(val) {
      this.erweimaQuery.pageSize = val;
      this.getcompanyServiceSel();
    },
    handleCurrentChange(val) {
      this.erweimaQuery.pageNumber = val;
      this.getcompanyServiceSel();
    }
  }
};
</script>

<style lang="less">
.onlineKefu {
  position: fixed;
  top: 53%;
  right: 0%;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 80px;
  border: 1px solid #ffffff;
  z-index: 1;
  padding: 20px;
  background: #f7f7f7;
  img {
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
</style>
